<template>
  <el-container class="layout-container">
    <el-aside class="huanxing-aside" :class="{'huanxing-collapse':isCollapse}">
      <Logo />
      <!-- logo  -->
      <Sidebar />
      <!-- 左侧菜单  -->
    </el-aside>
    <el-container>
      <el-header>
        <!-- 顶部  -->
        <Top />
      </el-header>
      <el-main>
        <!-- 顶部导航标签 -->
        <Tags />
        <!-- 主视图  -->
        <el-scrollbar class="huanxing-scrollbar">
          <transition name="fade-transform" mode="out-in">
            <router-view></router-view>
          </transition>
          <el-footer>
            <div class="huanxing-footer">
              <img src="/img/footer.png" />
            </div>
          </el-footer>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import Sidebar from './sidebar/index.vue'
import Top from './top/index.vue'
import Tags from './tags.vue'
import Logo from './logo.vue'
export default defineComponent({
  name: 'Layout',
  components: {
    Sidebar,
    Top,
    Logo,
    Tags,
  },
  setup() {
    const store = useStore()
    const isCollapse = computed(() => store.getters.isCollapse)
    return {
      isCollapse,
    }
  },
})
</script>
